<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>文章列表</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/main.css" />
        <!-- jq -->
        <script src="./libs/jquery-1.12.4.min.js"></script>
        <!-- 模板引擎 -->
        <script src="./libs/template-web.js"></script>
        <!-- 导入日期插件 -->
        <script src="./libs/jedate/js/jedate.js"></script>
        <link rel="stylesheet" href="./libs/jedate/css/jeDate-test.css" />
        <link rel="stylesheet" href="./libs/jedate/css/jedate.css" />
        <!-- 导入富文本插件 -->
        <script src="./libs/wangEditor/wangEditor.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="common_title">文章编辑</div>
            <div class="container-fluid common_con">
                <form class="form-horizontal article_form" id="form">
                    <div class="form-group">
                        <label for="inputTitle" class="col-sm-2 control-label"
                            >文章标题：</label
                        >
                        <div class="col-sm-10">
                            <input
                                type="text"
                                name="title"
                                class="form-control title"
                                id="inputTitle"
                                value="文章标题文字"
                            />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputCover" class="col-sm-2 control-label"
                            >文章封面：</label
                        >
                        <div class="col-sm-10">
                            <img src="images/pic06.jpg" class="article_cover" />
                            <input name="cover" type="file" id="inputCover" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label
                            for="inputCategory"
                            class="col-sm-2 control-label"
                            >文章类别：</label
                        >
                        <div class="col-sm-4">
                            <select
                                class="form-control category"
                                name="categoryId"
                            >
                                <option>类别一</option>
                                <option>类别二</option>
                                <option>类别三</option>
                                <option selected>类别四</option>
                                <option>类别五</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">发布时间：</label>
                        <div class="col-sm-4">
                            <!-- 日期插件容器 -->
                            <div class="jeinpbox">
                                <input
                                    type="text"
                                    class="jeinput"
                                    id="testico"
                                    placeholder="YYYY-MM-DD"
                                    name="date"
                                />
                                <div class="icons jebtns"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label"
                            >文章内容：</label
                        >
                        <div class="col-sm-10">
                            <!-- 富文本容器 -->
                            <div id="editor">
                                <!-- <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> -->
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 form-btn">
                            <button
                                type="submit"
                                class="btn btn-success btn-edit"
                            >
                                修改
                            </button>
                            <button
                                type="submit"
                                class="btn btn-default btn-draft"
                            >
                                存为草稿
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>
<script src="./libs/https.js"></script>
<script>
    $(function () {
        $("#inputCover").on("change", function () {
            let picurl = URL.createObjectURL(this.files[0]);
            $(".article_cover").attr("src", picurl);
        });

        $.ajax({
            type: "get",
            url: BigNew.category_list,
            success: function (backData) {
                // console.log(backData);
                if (backData.code == 200) {
                    let htmlStr = "";
                    $.each(backData.data, function (index, value) {
                        htmlStr += `<option value="${value.id}">${value.name}</option>`;
                    });
                    $(".category").html(htmlStr);
                }
            },
        });

        $(".jebtns").on("click", function () {
            jeDate("#testico", {
                trigger: false,
                format: "YYYY/MM/DD hh:mm:ss",
                theme: {
                    bgcolor: "skyblue",
                    color: "#ffffff",
                    pnColor: "#00CCFF",
                },
                zIndex: 20000,
            });
        });

        const E = window.wangEditor;
        const editor = new E("#editor");
        editor.create();

        let articleId = window.location.search.split("=")[1];

        $.ajax({
            type: "get",
            url: BigNew.article_search,
            data: {
                id: articleId,
            },
            success: function (backData) {
                console.log(backData);
                $(".title").val(backData.data.title);
                $(".article_cover").attr("src", backData.data.cover);
                $(".category").val(backData.data.categoryId);
                $(".jeinput").val(backData.data.date);
                editor.txt.html(backData.data.content);
            },
        });

        function saveData(state) {
            let fd = new FormData(document.querySelector("form"));

            fd.append("id", articleId);
            fd.append("state", state);
            fd.append("content", editor.txt.html());

            $.ajax({
                type: "post",
                url: BigNew.article_edit,
                data: fd,
                contentType: false,
                processData: false,
                success: function (backData) {
                    // console.log(backData);
                    if (backData.code == 200) {
                        alert(backData.msg);
                        window.location = "./article_list.html";
                    }
                },
            });
        }

        $(".form-btn button").on("click", function (e) {
            e.preventDefault();

            let text = $(this).text();
            if (text == "修改") {
                saveData("已发布");
            } else {
                saveData("草稿");
            }
        });
    });
</script>
